<template>
  <div class="drawer-wrap">
    <div class="drawer-head">
      <div class="font-16">
        <div slot="title">{{ type.reportType | getTitle }}</div>
      </div>
    </div>
    <div class="drawer-body pd-40 pt-20">
      <div class="trigger-time-form">
         <el-form ref="triggerTimeFormRef" label-width="110px" :model="triggerTimeForm" hide-required-asterisk>
           <el-form-item label="循环类型：" prop="triggerPeriodType">
             <el-select
             placeholder="请选择循环类型"
             filterable
             size="small"
             style="width: 100%"
             v-model="triggerTimeForm.loopType"
             @change="handleLoopType"
            >
              <el-option
                v-for="item in triggerTimeType"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
           </el-form-item>
          <el-form-item label="指定日期：" prop="triggerAssignDate" :rules="[{ required: true, message: '请选择日期', trigger: 'change' }]" v-if="triggerTimeForm.loopType === 0">
            <el-date-picker
              v-model="triggerTimeForm.triggerAssignDate"
              type="date"
              placeholder="选择日期"
              size="small"
              style="width: 65%"
              :picker-options="pickerOptions"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
          <el-form-item
          label="指定星期："
          prop="triggerWeekAssignDate"
          :rules="[{ required: true, message: '请选择指定星期', trigger: 'change' }]"
          v-if="triggerTimeForm.loopType === 2">
            <el-checkbox :indeterminate="isWeekIndeterminate" v-model="checkAllWeek" @change="handleCheckAllWeek">全选</el-checkbox>
            <el-checkbox-group  v-model="triggerTimeForm.triggerWeekAssignDate" @change="handleCheckedWeeksChange">
              <el-checkbox v-for="item in weeks" :label="item.id" :key="item.id">{{item.week}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item
          label="指定日期："
          prop="triggerMonthAssignDate"
          :rules="[{ required: true, message: '请选择指定日期', trigger: 'change' }]"
          v-if="triggerTimeForm.loopType === 3">
            <el-checkbox :indeterminate="isMonthIndeterminate" v-model="checkAllMonth" @change="handleCheckAllMonths">全选</el-checkbox>
            <el-checkbox-group v-model="triggerTimeForm.triggerMonthAssignDate" @change="handleCheckedMonthsChange">
              <el-checkbox v-for="item in months" :label="item.id" :key="item.id" style="margin-right: 20px">{{item.month}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <template v-if="triggerTimeForm.loopType !== 0">
            <el-form-item label="开始日期：" prop="triggerStartDate" :rules="[{ required: true, message: '请选择开始日期', trigger: 'change' }]">
              <el-date-picker
              v-model="triggerTimeForm.triggerStartDate"
              type="date"
              placeholder="选择开始日期"
              size="small"
              style="width: 65%"
              :picker-options="pickerOptions"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            />
            </el-form-item>
            <el-form-item label="结束日期：" class="end-date">
              <el-radio v-model="triggerTimeForm.triggerEndDateType" :label="0" @change="changeEndDateType">永不过期</el-radio>
              <el-radio v-model="triggerTimeForm.triggerEndDateType" :label="1" class="radio-warp">
                <el-form-item prop="triggerEndDate" :rules="[{ required: triggerTimeForm.triggerEndDateType === 1 ? true : false, message: '请选择结束日期', trigger: 'change' }]">
                  <el-date-picker
                    v-model="triggerTimeForm.triggerEndDate"
                    type="date"
                    placeholder="选择结束日期"
                    size="small"
                    style="width: 80%"
                    :picker-options="pickerOptions"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    @focus="handleEndDateFocus"
                  />
                </el-form-item>
              </el-radio>
            </el-form-item>
          </template>
          <el-form-item label="指定时间：" prop="triggerTimePointValues" :rules="{required: true, message: '请选择指定时间', trigger: 'change'}">
            <el-time-picker
              v-model="triggerTimeForm.triggerTimePointValues"
              placeholder="请选择时间点"
              size="small"
              style="width: 65%"
              format="HH:mm:ss"
              value-format="HH:mm:ss"
            />
          </el-form-item>
         </el-form>
      </div>
    </div>
    <div class="drawer-foot">
      <el-button size="small" type="primary" @click="handleSave">确定</el-button>
      <el-button size="small" @click="handleCancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import { setDynamicTiming } from '@/views/children/antiepidemic/js/dynamicTiming'
export default {
  props: {
    type: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      pickerOptions: {
        disabledDate (time) {
          return time < Date.now() - 86400000
        }
      },
      triggerTimeForm: {
        loopType: 0, // 循环类型
        triggerAssignDate: '', // 单次执行日期
        triggerWeekAssignDate: [], // 星期执行日期
        triggerMonthAssignDate: [], // 月份执行日期
        triggerStartDate: '', // 开始日期
        triggerEndDateType: 0, // 结束时间类型
        triggerEndDate: '', // 结束时间
        triggerTimePointValues: '' // 指定时间点
      },
      checkAllWeek: false, // 星期执行全选
      isWeekIndeterminate: false, // 星期全选 半选状态
      checkAllMonth: false, // 月份执行全选
      isMonthIndeterminate: false, // 月份全选 半选状态
      triggerTimeType: [ // 触发时间类型
        { id: 0, name: '单次' },
        { id: 1, name: '每天' },
        { id: 2, name: '每周' },
        { id: 3, name: '每月' }
      ],
      weeks: [
        { id: '1', week: '星期一' },
        { id: '2', week: '星期二' },
        { id: '3', week: '星期三' },
        { id: '4', week: '星期四' },
        { id: '5', week: '星期五' },
        { id: '6', week: '星期六' },
        { id: '7', week: '星期日' }
      ],
      months: []
    }
  },
  filters: {
    getTitle (value) {
      let valueJson = {
        0: '设置健康上报时间：',
        1: '设置核酸码上报时间：',
        2: '设置疫测上报时间：'
      }
      return valueJson[value] || ''
    }
  },
  watch: {
    'triggerTimeForm.triggerWeekAssignDate': {
      immediate: true,
      deep: true,
      handler () {
        if (this.triggerTimeForm.triggerWeekAssignDate?.length) {
          this.checkAllWeek = this.triggerTimeForm.triggerWeekAssignDate.length === this.weeks.length
          this.isWeekIndeterminate = this.triggerTimeForm.triggerWeekAssignDate.length > 0 && this.triggerTimeForm.triggerWeekAssignDate.length < this.weeks.length
        }
      }
    },
    'triggerTimeForm.triggerMonthAssignDate': {
      immediate: true,
      deep: true,
      handler () {
        if (this.triggerTimeForm.triggerMonthAssignDate?.length) {
          this.checkAllMonth = this.triggerTimeForm.triggerMonthAssignDate.length === this.months.length
          this.isMonthIndeterminate = this.triggerTimeForm.triggerMonthAssignDate.length > 0 && this.triggerTimeForm.triggerMonthAssignDate.length < this.months.length
        }
      }
    },
    type: {
      handler (value) {
        if (!value) return
        // 前端逻辑已经写好了 出入参对不上 转化一次吧 不然动逻辑有的改了
        this.triggerTimeForm = {
          loopType: value.timeType,
          triggerAssignDate: value.timeType === 0 ? value.beginTime : null,
          triggerWeekAssignDate: value.timeType === 2 ? (value.days || '').split(',') : [], // 星期执行日期
          triggerMonthAssignDate: value.timeType === 3 ? (value.days || '').split(',') : [], // 月份执行日期
          triggerStartDate: value.timeType !== 0 ? value.beginTime : null, // 开始日期
          triggerEndDateType: value.endTime ? 1 : 0, // 结束时间类型
          triggerEndDate: value.endTime, // 结束时间
          triggerTimePointValues: value.taskTime // 指定时间点
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted () {
    this.getMonthsData()
    // 获取配置
  },
  methods: {
    changeEndDateType () {
      this.triggerTimeForm.triggerEndDate = ''
    },
    handleCancel () {
      this.$emit('click-cancel')
    },
    handleSave () {
      this.$refs.triggerTimeFormRef.validate((valid) => {
        if (!valid) return
        const valueJson = {
          0: '设置健康上报时间',
          1: '设置核酸码上报时间',
          2: '设置疫测上报时间'
        }
        const triggerTimeForm = this.triggerTimeForm
        let data = {
          beginTime: triggerTimeForm.triggerAssignDate || triggerTimeForm.triggerStartDate,
          days: triggerTimeForm.triggerWeekAssignDate.join(',') || triggerTimeForm.triggerMonthAssignDate.join(','),
          endTime: triggerTimeForm.triggerEndDate,
          reportType: this.type.reportType,
          taskTime: triggerTimeForm.triggerTimePointValues,
          timeType: triggerTimeForm.loopType
        }
        setDynamicTiming(data).then(res => {
          const { code } = res
          if (code === 0) {
            this.$message.success(`${valueJson[data.reportType]}成功`)
            this.$emit('click-cancel', true)
          }
        })
      })
    },
    handleCheckAllWeek (val) {
      this.triggerTimeForm.triggerWeekAssignDate = val ? this.weeks.map(n => n.id) : []
    },
    handleCheckedWeeksChange (val) {
      this.checkAllWeek = val.length === this.weeks.length
      this.isWeekIndeterminate = val.length > 0 && val.length < this.weeks.length
    },
    handleCheckAllMonths (val) {
      this.triggerTimeForm.triggerMonthAssignDate = val ? this.months.map(n => n.id) : []
      this.isMonthIndeterminate = false
    },
    handleCheckedMonthsChange (val) {
      this.checkAllMonth = val.length === this.months.length
      this.isMonthIndeterminate = val.length > 0 && val.length < this.months.length
    },
    handleEndDateFocus () {
      this.triggerTimeForm.triggerEndDateType = 1
    },
    getMonthsData () {
      // 获取31天
      for (let i = 1; i < 32; i++) {
        this.months.push({
          id: `${i}`,
          month: i < 10 ? `0${i}` : `${i}`
        })
      }
    },
    // 类型改变 重置规则
    handleLoopType (val) {
      this.triggerTimeForm = {
        loopType: val, // 循环类型
        triggerAssignDate: '', // 单次执行日期
        triggerWeekAssignDate: [], // 星期执行日期
        triggerMonthAssignDate: [], // 月份执行日期
        triggerStartDate: '', // 开始日期
        triggerEndDateType: 0, // 结束时间类型
        triggerEndDate: '', // 结束时间
        triggerTimePointValues: null // 指定时间点
      }
      this.isWeekIndeterminate = false
      this.checkAllWeek = false
      this.isMonthIndeterminate = false
      this.checkAllMonth = false
    }
  }
}
</script>

<style lang="scss" scoped>
.end-date {
  ::v-deep {
    .el-form-item__content {
      display: flex;
      align-items: center;
    }
  }
  .radio-warp {
    display: flex;
    align-items: center;
  }
}
</style>
